feat(ui): add UserButton view component - #9184
Conversation
🦋 Changeset detectedLatest commit: 9656849 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a client-side Mosaic Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-google-signin
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
API Changes Report
Summary
No API Changes DetectedAll packages have stable APIs with no detected changes. Report generated by Break Check Last ran on |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/swingset/src/lib/registry.ts`:
- Around line 3-8: Update the manually constructed AccountButton story module to
preserve the story’s raw __source export. Import __source from
account-button.stories and include it in the module object alongside
AccountButtonDefault, AccountButtonMultipleAccounts, AccountButtonPersonal, and
accountButtonMeta; apply the same change to the corresponding second
construction.
In `@packages/swingset/src/stories/account-button.mdx`:
- Around line 3-21: Restructure the AccountButton MDX documentation into
Archetype C format: replace the current descriptive sections with one short
paragraph covering owned state and the wired lower-layer pieces, then provide
exactly one Story. Add a composition array to that Story listing each direct
dependency, including the headless popover primitive and slot recipes, and
remove the current multi-story layout.
In `@packages/swingset/src/stories/account-button.stories.tsx`:
- Around line 10-14: Update the AccountButton story metadata to assign
accountButtonRecipe to meta.styles. In each story function, cast the knobs
Record<string, unknown> through knobsAsProps and spread the resulting props into
AccountButton so playground values are applied.
In `@packages/ui/src/mosaic/components/account-button.view.tsx`:
- Around line 446-808: Split the presentational leaves and sections from
account-button.view.tsx into focused React modules, extracting symbols such as
Avatar, Row, Header, WorkspaceList, AccountsSection, and Footer while preserving
their current behavior and context usage. Keep the public compound component
composition and exports in account-button.view.tsx, and update imports as needed
so the file remains focused and within the project’s preferred component size.
- Around line 21-85: Add comprehensive customer-facing JSDoc to the exported
AccountButtonAccount, AccountButtonMembership, AccountButtonSuggestion,
AccountButtonInvitation, AccountButtonData, AccountButtonCallbacks, and props
contracts, documenting field semantics including onUpgrade. Add explicit
React.JSX.Element return types to all four exported AccountButton components,
then request Docs-team review for the generated public API documentation.
- Around line 57-68: Remove the inert status field from AccountButtonData for
v1, since the current loading value still requires and renders ready-state data.
Update AccountButton consumers, including the account-button view, to rely on
the existing ready-state shape without status checks; only retain status if you
introduce a genuine discriminated union with a separate loading rendering path.
- Around line 488-535: Update the selection control rendered by Row to expose
its active state through the appropriate aria-current attribute, using the
active prop’s value. Apply the attribute to the interactive button and the
non-interactive div consistently, while leaving the visual check icon behavior
unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Repository UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 05507a88-c836-4e0f-b43f-e0d914595582
📒 Files selected for processing (8)
.changeset/account-button-switcher.mdpackages/swingset/src/components/DocsViewer.tsxpackages/swingset/src/lib/registry.tspackages/swingset/src/stories/account-button.mdxpackages/swingset/src/stories/account-button.stories.tsxpackages/ui/src/mosaic/components/account-button.view.tsxpackages/ui/src/mosaic/icons/registry.tsxpackages/ui/src/mosaic/primitives/popover.tsx
| import { | ||
| Default as AccountButtonDefault, | ||
| meta as accountButtonMeta, | ||
| MultipleAccounts as AccountButtonMultipleAccounts, | ||
| Personal as AccountButtonPersonal, | ||
| } from '../stories/account-button.stories'; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Preserve __source when constructing the story module.
The story exports its raw source, but this manually built module drops it, preventing AccountButton code footers from rendering.
Proposed fix
import {
+ __source as accountButtonSource,
Default as AccountButtonDefault,
meta as accountButtonMeta,
MultipleAccounts as AccountButtonMultipleAccounts,
Personal as AccountButtonPersonal,
} from '../stories/account-button.stories';
const accountButtonModule: StoryModule = {
meta: accountButtonMeta,
+ __source: accountButtonSource,
Default: AccountButtonDefault,As per path instructions, Components-layer stories export __source to enable code footers.
Also applies to: 130-135
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/swingset/src/lib/registry.ts` around lines 3 - 8, Update the
manually constructed AccountButton story module to preserve the story’s raw
__source export. Import __source from account-button.stories and include it in
the module object alongside AccountButtonDefault, AccountButtonMultipleAccounts,
AccountButtonPersonal, and accountButtonMeta; apply the same change to the
corresponding second construction.
Source: Path instructions
| # AccountButton | ||
|
|
||
| The account & organization switcher that sits behind the user button. The active account sits at the | ||
| top with its organizations (including any **suggested** workspaces you can Join), and **additional | ||
| accounts** are listed below. Hovering the active account reveals **Sign out**; clicking any additional | ||
| account switches to it. **Settings / Members** open the combined profile modal, and the surface also | ||
| exposes **Add organization**, **Add account**, and **Sign out of all accounts**. | ||
|
|
||
| It is the styled Mosaic component composed from the headless `@clerk/headless` popover primitive plus | ||
| slot recipes, and inherits the primitive's open/close behavior, focus management, and ARIA wiring. This | ||
| first pass is presentational: the parts render from the props on `AccountButtonRoot` (mock data in the | ||
| examples). A `useAccountButtonController()` that reads live Clerk resources is a drop-in follow-up. | ||
|
|
||
| ## Example | ||
|
|
||
| <Story | ||
| name='Default' | ||
| storyModule={AccountButtonStories} | ||
| /> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
Use the Archetype C documentation structure.
Lead with one short paragraph describing owned state and wired lower-layer pieces, followed by one <Story> whose composition array names each direct dependency. The current multiple-story layout follows neither requirement.
As per path instructions, Archetype C MDX must use a single ownership/composition paragraph followed by one Story with a dependency composition array.
Also applies to: 68-89
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/swingset/src/stories/account-button.mdx` around lines 3 - 21,
Restructure the AccountButton MDX documentation into Archetype C format: replace
the current descriptive sections with one short paragraph covering owned state
and the wired lower-layer pieces, then provide exactly one Story. Add a
composition array to that Story listing each direct dependency, including the
headless popover primitive and slot recipes, and remove the current multi-story
layout.
Source: Path instructions
| export const meta: StoryMeta = { | ||
| group: 'Components', | ||
| title: 'AccountButton', | ||
| source: 'packages/ui/src/mosaic/components/account-button.view.tsx', | ||
| }; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Wire the stories into the playground knobs.
Set meta.styles to accountButtonRecipe, add the local knobsAsProps cast, and spread the resulting props into each AccountButton. The current stories discard every playground value.
As per path instructions, story functions must cast Record<string, unknown> through knobsAsProps, and Mosaic recipe metadata must be assigned to meta.styles.
Also applies to: 36-112
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/swingset/src/stories/account-button.stories.tsx` around lines 10 -
14, Update the AccountButton story metadata to assign accountButtonRecipe to
meta.styles. In each story function, cast the knobs Record<string, unknown>
through knobsAsProps and spread the resulting props into AccountButton so
playground values are applied.
Source: Path instructions
| export interface AccountButtonAccount { | ||
| sessionId: string; | ||
| userId: string; | ||
| name: string; | ||
| email: string; | ||
| imageUrl?: string; | ||
| } | ||
|
|
||
| export interface AccountButtonMembership { | ||
| kind: 'membership'; | ||
| organizationId: string; | ||
| name: string; | ||
| imageUrl?: string; | ||
| membersCount?: number; | ||
| planLabel?: string; | ||
| upgradeable?: boolean; | ||
| membershipRequestCount?: number; | ||
| } | ||
|
|
||
| export interface AccountButtonSuggestion { | ||
| kind: 'suggestion'; | ||
| id: string; | ||
| organizationId: string; | ||
| name: string; | ||
| imageUrl?: string; | ||
| status: 'pending' | 'accepted'; | ||
| } | ||
|
|
||
| export interface AccountButtonInvitation { | ||
| kind: 'invitation'; | ||
| id: string; | ||
| organizationId: string; | ||
| organizationName: string; | ||
| imageUrl?: string; | ||
| } | ||
|
|
||
| export interface AccountButtonData { | ||
| status: 'loading' | 'ready'; | ||
| activeAccount: AccountButtonAccount; | ||
| /** `null` => the personal workspace is active. */ | ||
| activeOrganizationId: string | null; | ||
| /** Explicit; do not derive from `memberships.length`. */ | ||
| hasOrganizations: boolean; | ||
| memberships: AccountButtonMembership[]; | ||
| suggestions: AccountButtonSuggestion[]; | ||
| invitations: AccountButtonInvitation[]; | ||
| additionalAccounts: AccountButtonAccount[]; | ||
| } | ||
|
|
||
| /** All optional. An unhandled action hides (or de-activates) the affordance it drives. */ | ||
| export interface AccountButtonCallbacks { | ||
| onSelectOrganization?: (organizationId: string) => void; | ||
| onSelectPersonal?: () => void; | ||
| onAcceptSuggestion?: (suggestionId: string) => void; | ||
| onAcceptInvitation?: (invitationId: string) => void; | ||
| onSwitchAccount?: (sessionId: string) => void; | ||
| onSignOutSession?: (sessionId: string) => void; | ||
| onSignOutAll?: () => void; | ||
| onManageOrganization?: () => void; | ||
| onManageMembers?: () => void; | ||
| onManageAccount?: () => void; | ||
| onCreateOrganization?: () => void; | ||
| onAddAccount?: () => void; | ||
| onUpgrade?: () => void; | ||
| } |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
Complete the public API documentation and return types.
The exported resource, callback, and props contracts—especially onUpgrade—lack customer-facing field semantics, while the four exported components have no explicit return types. Add comprehensive JSDoc and React.JSX.Element annotations, then request Docs-team review.
As per coding guidelines, all public APIs require comprehensive JSDoc and explicit return types. As per path instructions, public JSDoc under packages/** feeds generated Clerk Docs.
Also applies to: 812-839, 841-905
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/ui/src/mosaic/components/account-button.view.tsx` around lines 21 -
85, Add comprehensive customer-facing JSDoc to the exported
AccountButtonAccount, AccountButtonMembership, AccountButtonSuggestion,
AccountButtonInvitation, AccountButtonData, AccountButtonCallbacks, and props
contracts, documenting field semantics including onUpgrade. Add explicit
React.JSX.Element return types to all four exported AccountButton components,
then request Docs-team review for the generated public API documentation.
Sources: Coding guidelines, Path instructions
| export interface AccountButtonData { | ||
| status: 'loading' | 'ready'; | ||
| activeAccount: AccountButtonAccount; | ||
| /** `null` => the personal workspace is active. */ | ||
| activeOrganizationId: string | null; | ||
| /** Explicit; do not derive from `memberships.length`. */ | ||
| hasOrganizations: boolean; | ||
| memberships: AccountButtonMembership[]; | ||
| suggestions: AccountButtonSuggestion[]; | ||
| invitations: AccountButtonInvitation[]; | ||
| additionalAccounts: AccountButtonAccount[]; | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Do not publish an inert status state.
status='loading' renders the complete ready UI and still requires every ready-state resource. Remove status for v1, or make AccountButtonData a real discriminated union with a loading rendering path; correcting this after release would constrain @clerk/ui compatibility.
As per coding guidelines, use discriminated unions for state management and keep packages/ui APIs backwards-compatible.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/ui/src/mosaic/components/account-button.view.tsx` around lines 57 -
68, Remove the inert status field from AccountButtonData for v1, since the
current loading value still requires and renders ready-state data. Update
AccountButton consumers, including the account-button view, to rely on the
existing ready-state shape without status checks; only retain status if you
introduce a genuine discriminated union with a separate loading rendering path.
Source: Coding guidelines
| function Row({ name, secondary, shape, imageUrl, onSelect, active, badge, trailing, hoverAction }: RowProps) { | ||
| const { item, select, name: nameSlot, secondary: secondarySlot } = useRecipe(accountButtonRecipe); | ||
| const inner = ( | ||
| <> | ||
| <Avatar | ||
| name={name} | ||
| imageUrl={imageUrl} | ||
| shape={shape} | ||
| size='md' | ||
| /> | ||
| <span css={{ display: 'flex', flexDirection: 'column', minWidth: 0, flex: 1 }}> | ||
| <span css={{ display: 'flex', alignItems: 'center', gap: '0.375rem', minWidth: 0 }}> | ||
| <span {...nameSlot}>{name}</span> | ||
| {badge} | ||
| </span> | ||
| {secondary ? <span {...secondarySlot}>{secondary}</span> : null} | ||
| </span> | ||
| </> | ||
| ); | ||
| return ( | ||
| <div {...item}> | ||
| {onSelect ? ( | ||
| <button | ||
| type='button' | ||
| onClick={onSelect} | ||
| {...select} | ||
| > | ||
| {inner} | ||
| </button> | ||
| ) : ( | ||
| <div | ||
| {...select} | ||
| style={{ cursor: 'default' }} | ||
| > | ||
| {inner} | ||
| </div> | ||
| )} | ||
| {active ? ( | ||
| <Icon | ||
| name='check' | ||
| size='sm' | ||
| sx={t => ({ color: t.color.cardForeground, flexShrink: 0 })} | ||
| /> | ||
| ) : null} | ||
| {trailing} | ||
| {hoverAction} | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
🔒 Security & Privacy | 🟡 Minor | ⚡ Quick win
Expose the active row to assistive technology.
The check icon is purely visual. Mark the selection control with aria-current so screen-reader users can identify the active account or organization.
Proposed fix
<button
type='button'
+ aria-current={active ? 'true' : undefined}
onClick={onSelect}
{...select}As per coding guidelines, React components must implement proper ARIA attributes.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/ui/src/mosaic/components/account-button.view.tsx` around lines 488 -
535, Update the selection control rendered by Row to expose its active state
through the appropriate aria-current attribute, using the active prop’s value.
Apply the attribute to the interactive button and the non-interactive div
consistently, while leaving the visual check icon behavior unchanged.
Source: Coding guidelines
alexcarpenter
changed the title
dfae67d to
ef35f2d
Compare
alexcarpenter
changed the title
ef35f2d to
8f7ffa2
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (2)
packages/ui/src/mosaic/user-button/user-button.view.tsx (2)
477-538: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winExpose the active row to assistive technology.
The check icon at Lines 527-533 is purely visual. Add
aria-currentto the interactivebutton(Line 512) and the non-interactivediv(Line 520) inRow, driven by theactiveprop, so screen-reader users can identify the active account or organization.This mirrors the same unresolved concern raised previously on the sibling
account-button.view.tsxfile.As per coding guidelines, "Implement proper ARIA attributes for accessibility in React components."
♿ Proposed fix
{onSelect ? ( <button type='button' + aria-current={active ? 'true' : undefined} onClick={onSelect} {...select} > {inner} </button> ) : ( <div {...select} + aria-current={active ? 'true' : undefined} style={{ cursor: 'default' }} > {inner} </div> )}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/mosaic/user-button/user-button.view.tsx` around lines 477 - 538, Update the interactive and non-interactive row elements in Row to expose active state through aria-current, deriving the attribute from the active prop. Apply the same value to both the button and fallback div while preserving their existing behavior and rendering.
447-813: 📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy liftSplit this file into focused modules.
This file still holds the data contracts, recipe, context, presentational leaves (
Avatar,Row,SuggestedBadge,InlineButton,HoverAction,AddRow), sections (Header,WorkspaceList,SessionsSection,Footer), and the public compound parts in one 912-line module. Extract the leaves and sections into separate files and keep the compound composition (UserButtonRoot,UserButtonTrigger,UserButtonPopup,UserButton) here.This mirrors the same unresolved concern raised previously on the sibling
account-button.view.tsxfile.As per coding guidelines, "Limit component size to 150-200 lines; extract logic into custom hooks."
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/mosaic/user-button/user-button.view.tsx` around lines 447 - 813, Split the user-button view into focused modules: move the presentational leaves Avatar, Row, SuggestedBadge, InlineButton, HoverAction, and AddRow, plus Header, WorkspaceList, SessionsSection, and Footer, into separate files with their required shared contracts and imports. Keep UserButtonRoot, UserButtonTrigger, UserButtonPopup, and UserButton in the current module, preserving their existing composition and behavior while reducing the file to focused component logic.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/swingset/src/lib/registry.ts`:
- Around line 108-113: Update the UserButton story imports to include the
exported __source value, then assign it to the __source property when
constructing userButtonModule alongside the existing story metadata. Preserve
the current module construction behavior for all other fields.
In `@packages/swingset/src/stories/user-button.mdx`:
- Around line 5-14: Merge the interaction and implementation descriptions in the
user-button intro into one short, present-tense paragraph, preserving the key
behavior and composition details while removing redundant wording.
- Around line 68-90: Replace the nonstandard “States & scenarios” heading in the
user-button documentation with the established “Examples” section name, keeping
the Personal and MultipleSessions stories and their descriptions under that
section.
---
Duplicate comments:
In `@packages/ui/src/mosaic/user-button/user-button.view.tsx`:
- Around line 477-538: Update the interactive and non-interactive row elements
in Row to expose active state through aria-current, deriving the attribute from
the active prop. Apply the same value to both the button and fallback div while
preserving their existing behavior and rendering.
- Around line 447-813: Split the user-button view into focused modules: move the
presentational leaves Avatar, Row, SuggestedBadge, InlineButton, HoverAction,
and AddRow, plus Header, WorkspaceList, SessionsSection, and Footer, into
separate files with their required shared contracts and imports. Keep
UserButtonRoot, UserButtonTrigger, UserButtonPopup, and UserButton in the
current module, preserving their existing composition and behavior while
reducing the file to focused component logic.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 6df10ab6-9322-4890-89da-e4419eb949e3
📒 Files selected for processing (8)
.changeset/user-button-switcher.mdpackages/swingset/src/components/DocsViewer.tsxpackages/swingset/src/lib/registry.tspackages/swingset/src/stories/user-button.mdxpackages/swingset/src/stories/user-button.stories.tsxpackages/ui/src/mosaic/icons/registry.tsxpackages/ui/src/mosaic/primitives/popover.tsxpackages/ui/src/mosaic/user-button/user-button.view.tsx
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
clerk/clerk_go(manual)clerk/dashboard(manual)clerk/accounts(manual)clerk/backoffice(manual)clerk/clerk(manual)clerk/clerk-docs(manual)clerk/cloudflare-workers(manual)
🚧 Files skipped from review as they are similar to previous changes (2)
- .changeset/user-button-switcher.md
- packages/ui/src/mosaic/primitives/popover.tsx
| import { | ||
| Default as UserButtonDefault, | ||
| meta as userButtonMeta, | ||
| MultipleSessions as UserButtonMultipleAccounts, | ||
| Personal as UserButtonPersonal, | ||
| } from '../stories/user-button.stories'; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Preserve __source when constructing userButtonModule.
user-button.stories.tsx exports __source via its ?raw self-import, but this import list (Lines 108-113) omits it, and userButtonModule (Lines 185-190) never sets it. Any consumer of StoryModule.__source for the code-footer feature won't have it for UserButton.
This mirrors the same unresolved concern raised previously for accountButtonModule.
🛠️ Proposed fix
import {
+ __source as userButtonSource,
Default as UserButtonDefault,
meta as userButtonMeta,
MultipleSessions as UserButtonMultipleAccounts,
Personal as UserButtonPersonal,
} from '../stories/user-button.stories';
...
const userButtonModule: StoryModule = {
meta: userButtonMeta,
+ __source: userButtonSource,
Default: UserButtonDefault,
Personal: UserButtonPersonal,
MultipleSessions: UserButtonMultipleAccounts,
};Also applies to: 185-190
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/swingset/src/lib/registry.ts` around lines 108 - 113, Update the
UserButton story imports to include the exported __source value, then assign it
to the __source property when constructing userButtonModule alongside the
existing story metadata. Preserve the current module construction behavior for
all other fields.
Nudges the popup along the alignment axis, the counterpart to sideOffset.
…hers The surface now carries a mode: combined lists organizations and accounts, orgs drops the account rows, and user never resolves to an organization. The header gains an Invite button and a gear that manages the active workspace; rows below it are xs with no descriptions. Create organization moves to the footer in orgs mode, where there is no account menu to hold it.
All three mode examples now share one piece of mock state, so picking a workspace or an account really switches to it and closes the surface, and Join turns a suggestion or an invitation into a workspace. The orgs and user examples take the same props as combined and differ only by mode, which is the claim the docs make about the prop.
The active workspace already carries a check; making it a button gave it a hover and press state for a selection that would do nothing.
Workspaces and additional accounts were two groups, so another account read as a new section rather than a peer of the workspaces above it. They now share one group, one spacing rhythm, and one scroll region, and the separator that introduces the list lives with the list.
Switching organization replaced the header with the organization, so the account you are signed in as disappeared from the top. Only an org-only surface is now headed by the organization; everywhere else the account heads it and the trigger alone follows the active organization. Invite still belongs to that organization wherever there is one.
Only the active account's workspaces were listed, so another account was an email row you had to switch to before you could see anything under it. Each account now heads its own workspaces, and picking one makes both it and its account active: additionalSessions becomes additionalAccounts, each carrying its memberships, and onSelectOrganization plus onSelectPersonal collapse into onSelectWorkspace(sessionId, organizationId) — the pair setActive already takes.
The icon rested on a translucent mix of currentColor, so it picked up whatever sat behind the button and drifted per surface. Each variant x color cell now declares its own opaque faded tint and rises to full strength on hover or while open. Menu.Trigger's ellipsis goes through Icon so it follows the same rule.
The radius lived only on the root, so the fallback's own fill relied on the clip alone. Both parts now inherit it.
An Icon in Item.Media painted currentColor from the row, which never moved, so it stayed faded while Item.Label brightened. The row now publishes --_cl-icon-color the way Button does, and only interactive rows promote, so a static row's check icon holds. Drops the itemScope marker, which existed only so Item.Label could match the row's hover.
Three hand-rolled SVGs, two of them with a hardcoded fill, could not follow the row's color. Documents the hover behavior alongside.
075c15d to
4e052b8
Compare
Adds a ClerkLogo component and centers the branding row on it, in place of the word mark in text.
1 participant
New Mosaic
UserButton: account + org switcher (multi-session + org select/suggest/invite) behind a popover. Presentational view only; controller is follow-up.UserButtonRoot/Trigger/Popup+ all-in-oneUserButtonDeferred:
useUserButtonController(), pagination, real avatars.Note: added optional
onUpgrade(design shows Upgrade link); accent purple hardcoded (no token yet).